<template>
    <Echarts class="e-charts" :options="options" />
</template>

<script>
import Echarts from "../../../../../component/ECharts";
export default {
    name: "EchartsPie",
    components: {
        Echarts,
    },
    props: {
        reciveData: {
            type: Array,
        },
    },
    computed: {
        options() {
            const realData = (+this.reciveData[0]).toFixed(0);
            console.log(realData);
            return {
                // color: ["#CC2B33", "#CB6219", "#CACD2C", "#51C8D1"].reverse(),
                title: {
                    text: realData + "%",
                    textStyle: {
                        color: "#FFFFFF",
                        fontSize: 35,
                    },
                    // subtext: '综合得分',
                    // subtextStyle: {
                    //     color: '#666666',
                    //     fontSize: 30
                    // },
                    itemGap: 20,
                    left: "center",
                    top: "33%",
                },
                // tooltip: {
                //     formatter: function (params) {
                //         return '<span style="color: #fff;">综合得分：'+ getvalue + '分</span>';
                //     }
                // },
                angleAxis: {
                    max: 100,
                    clockwise: true, // 逆时针
                    // 隐藏刻度线
                    show: false,
                },
                radiusAxis: {
                    type: "category",
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                polar: {
                    // center: ['50%', '50%'],
                    radius: "180%", //图形大小
                },
                series: [
                    {
                        type: "bar",
                        data: [
                            {
                                value: realData,
                                itemStyle: {
                                    // normal: {
                                    opacity: 1,
                                    // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    //     {
                                    //         offset: 0,
                                    //         color: "rgb(254,254,24,1)",
                                    //     },
                                    //     {
                                    //         offset: 1,

                                    //         color: "rgb(199,130,21,1)",
                                    //     },
                                    // ]),
                                    // shadowBlur: 5,s
                                    // shadowColor: "#2A95F9",
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgb(254,254,24,1)",
                                            },
                                            {
                                                offset: 1,
                                                color: "rgb(199,130,21,1)",
                                            },
                                        ],
                                    },
                                    // },
                                },
                            },
                        ],
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgb(46, 46, 45)",
                        },
                        coordinateSystem: "polar",
                        roundCap: true,
                        barWidth: 5,
                    },
                ],
            };
        },
    },
};
</script>

<style>
.e-charts {
    width: 100%;
    height: 100%;
    /* margin-top: 10px; */
}
</style>
